<template>
	<view class="page">
		<view class="header">
			<view class="detail">
				<view class="flex-col rate">
					<text>预计年化收益率</text>
					<view>
						<text class="size-l">9.00</text>
						<text>%</text>
					</view>
				</view>
				<view class="flex footer">
					<view class="flex-col flex1">
						<text>投资期限</text>
						<text class="size-m">30天</text>
					</view>
					<view class="flex-col flex1">
						<text>起投金额(元)</text>
						<text class="size-m">100.00</text>
					</view>
				</view>
			</view>
		</view>
		<view class="step">
			<uni-steps active-color="#f5a67c" :options="stepsOptions" :active="stepsActive"></uni-steps>
			<view class="flex time">
				<text :class="{'active':stepsActive===index}" v-for="(item,index) in stepsOptions" :key="index">{{item.time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniTag,
		uniSteps
	} from '@dcloudio/uni-ui'
	export default {
		data() {
			return {
				productCodeNew: '',
				stepsOptions: [{
						title: '开始募集',
						time: '2020-04-27',
					},
					{
						title: '结束募集',
						time: '2020-04-27',
					},
					{
						title: '起息日',
						time: '2020-04-27',
					},
					{
						title: '到期日',
						time: '2020-04-27',
					},
				],
				stepsActive: 0
			};
		},
		components: {
			uniTag,
			uniSteps
		},
		onLoad(params) {
			console.log(params)
			const {
				productCodeNew = ''
			} = params;
			this.productCodeNew = productCodeNew;
			this.getDetail();
		},
		methods: {
			getDetail() {
				this.$http.post('kingdom.ktrade.get_pif_bond_detail_by_productcode_v5', 'v4.0', {
					productCodeNew: this.productCodeNew
				}).then(data => {
					console.log(data)
					const {
						productNameNew = ''
					} = data.items[0] || {};
					uni.setNavigationBarTitle({
						title: productNameNew
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #f9f9f8;
		min-height: calc(100vh - 50px);
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex-col {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.rate {
		height: 200rpx;
	}

	.flex1 {
		flex: 1;
	}

	.header {
		.detail {
			color: #FFFFFF;
			font-size: 24rpx;
			background-image: linear-gradient(#FF5036 60%, #FFFFFF);
		}

		.footer {
			height: 120rpx;
			background-color: rgba($color: #d73234, $alpha: .5);
		}

		.size-l {
			font-size: 50rpx;
		}

		.size-m {
			font-size: 32rpx;
			margin-top: 10rpx;
		}
	}

	.step {
		background-color: #FFFFFF;
		padding: 20rpx 0;

		.time {
			font-size: 24rpx;
			justify-content: space-around;
			margin-top: 10rpx;

			.active {
				color: #f5a67c;
			}
		}
	}
</style>
